﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>UI Controls Tests</title>
		<link href="../Common/Styles/qunit.css" type="text/css" rel="stylesheet" />

		<script src="../Common/Scripts/JQuery/jquery-1.3.2.js" type="text/javascript"></script>
		<script src="../Common/Scripts/QUnit/qunit.js" type="text/javascript"></script>
		<script src="../Common/Scripts/Microsoft/MicrosoftAjax.js" type="text/javascript"></script>
		<script src="../Common/Scripts/Microsoft/MicrosoftAjaxTemplates.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.js" type="text/javascript"></script>
		<script src="../Common/Scripts/QUnit/qunit.ext.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.model.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.mapper.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.view.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.ui.js" type="text/javascript"></script>
		<script src="../Common/Scripts/ExoWeb/exoweb.mock.js" type="text/javascript"></script>
		<script src="../Common/Scripts/mock-driver.js" type="text/javascript"></script>
		<script type="text/javascript">
			var account = {
				Name: "Checking",
				Owner: {
					Name: "John Doe"
				},
				Transactions: [
					{
						Type: "Debit",
						Amount: 1000000
					}
				]
			}
		</script>
		<script type="text/javascript">

			setupTest("test1", { description: "span", expect: 1 }, function() {
				equals($("#1-content1").children(":first-child").text(), "span", "checking template label");
			});
			setupTest("test2", { description: "div", expect: 1 }, function() {
				equals($("#2-content1").children(":first-child").text(), "div", "checking template label");
			});
			setupTest("test3", { description: "div.border", expect: 1 }, function() {
				equals($("#3-content1").children(":first-child").text(), "div.border", "checking template label");
			});

			timeoutTests(2000);
			
			function renderComplete() {
				console.log("render complete");

				executeTest("test1");
				executeTest("test2");
				executeTest("test3");
			}
			
		</script>
	</head>
	<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView"
		xmlns:content="javascript:ExoWeb.UI.Content" xmlns:template="javascript:ExoWeb.UI.Template" sys:activate="*">
		
		<!-- QUnit Display -->
		<h1 id="qunit-header">Test Results:</h1>
		<h2 id="qunit-banner"></h2>
		<h2 id="qunit-userAgent"></h2>
		<ol id="qunit-tests"></ol>
		
		<div class="sys-template account" sys:attach="dataview" dataview:data="{{ account }}" dataview:onrendered="{{ renderComplete }}">
			<h3>{ binding Name }</h3>
			
			<!--node type-->
			<span id="1-content" sys:attach="content" content:data="{{ Owner }}"></span>
			<div id="2-content" sys:attach="content" content:data="{{ Owner }}"></div>
			<!--css class-->
			<div id="3-content" sys:attach="content" content:data="{{ Owner }}" class="border"></div>
		</div>
		
		<span class="sys-template" sys:attach="template" template:for="div.border">
			<span class="label">div.border</span>:&nbsp;&nbsp;<span class="value">{binding Name}</span>
		</span>
		<span class="sys-template" sys:attach="template" template:for="span">
			<span class="label">span</span>:&nbsp;&nbsp;<span class="value">{binding Name}</span>
		</span>
		<span class="sys-template" sys:attach="template" template:for="div">
			<span class="label">div</span>:&nbsp;&nbsp;<span class="value">{binding Name}</span>
		</span>
	</body>
</html>
